<div id="generatePassword">
	<div id="generatePasswordPanel">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">×</button>
			<h3>
				<g:message code="user.profile.generate.password" />
			</h3>
		</div>

		<div class="modal-body">
				
			<g:formRemote name="generatePasswordForm" update="generatePassword"
				url="[controller: 'user', action: 'generatePassword']"
				before="showLoadingImageGeneratePassword();">

				<div class="form-horizontal">

					<g:hasErrors bean="${user}">
						<g:eachError bean="${user}" var="error">
							<div id="signinErrors" class="alert alert-error">
								<a class="close" data-dismiss="alert">×</a>
								<g:message error="${error}" />
							</div>
						</g:eachError>
					</g:hasErrors>
					
					<div
						class="control-group ${hasErrors(bean: user, field: 'password', 'error')}">
						<label class="control-label" for="inputPassword"><g:message
								code="user.password.new" /></label>
						<div class="controls">
							<g:field id="inputPassword" class="input-large" type="password"
								name="password"
								placeholder="${message(code: 'user.password.new')}" />
						</div>
					</div>

					<div
						class="control-group ${hasErrors(bean: user, field: 'password', 'error')}">
						<label class="control-label" for="inputConfirmPassword"><g:message
								code="auth.login.credentials.password.confirm" /></label>
						<div class="controls">
							<g:field id="inputConfirmPassword" class="input-large"
								type="password" name="confirmPassword"
								placeholder="${message(code: 'user.password.new')}" />
						</div>
					</div>
				</div>
			</g:formRemote>

		</div>

		<div class="modal-footer">
			<button id="acceptPasswordButton" class="btn" form="generatePasswordForm">
				<g:message code="default.ok.label" />
			</button>
			<img id="loadingImageGeneratePassword" class="passwordForm"
				src="${resource(dir:'images', file: 'ajax-loader.gif') }"
				alt="image"></img>
		</div>
	</div>

	<script type="text/javascript">
		$(document).ready(function() {
			$("#loadingImageGeneratePassword").hide();
		});
	
		function showLoadingImageGeneratePassword() {
			$("#loadingImageGeneratePassword").fadeIn();
		}
	</script>
</div>